<template>
  <div class="con">
    <div class="list_title">
      <div class="text">领导建议</div>
    </div>
    <div class="task_table">
      <div class="li" v-for="(item, index) in dataList" :key="index">
        <div class="li_title">
          <div class="info">
            <span class="name">{{ item.suggestUserName }}</span>
            <span class="post">{{ item.orgPost }}</span>
          </div>
          <div class="type">{{ item.type }}</div>
        </div>
        <div class="li_con" v-html="item.suggestion"></div>
      </div>
      <div class="no_data" v-if="dataList.length === 0"><empty></empty></div>
    </div>
  </div>
</template>

<script>
import { getRecordNoteListByType } from '@apis/api-intelligent.js'

import moment from 'moment'
moment.locale('zh-cn')
export default {
  name: 'FileProposal',
  components: {},
  props: {
    dataObj: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      dataList: [],
      activeTab: 'apply',
      boardTabsData: [
        { name: '领导评鉴', id: 'apply' },
        { name: '主管领导评价', id: 'applied' },
        { name: '月度评价', id: 'audit' },
      ],
      timeChoose: {},
    }
  },
  computed: {},
  watch: {
    dataObj: {
      handler(news) {
        if (news.year && news.userId) {
          this.pageInit()
        }
      },
      deep: true,
    },
  },
  created() {},

  mounted() {
    if (this.dataObj.userId && this.dataObj.year) {
      this.pageInit()
    }
  },
  methods: {
    async pageInit() {
      const { data } = await getRecordNoteListByType({
        currentPage: 1,
        pageSize: 1000,
        param: {
          userId: this.dataObj.userId,
          orgId: this.dataObj.orgId,
          year: this.dataObj.year,
        },
      })
      this.dataList = data.content
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
  },
}
</script>

<style lang="scss" scoped>
@import './title.scss';

.con {
  margin-top: 20px;

  .task_table {
    padding: 10px;
    // margin: 0 10px;
    border: 1px solid #dcdfe6;
    // border-top: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .li {
      width: 49%;
      padding: 15px;
      cursor: pointer;
      border: 1px solid #dcdfe6;
      margin-bottom: 10px;
      // &:hover {
      //   color: #0080FF;
      // }
      .li_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #333;
        .info {
          font-size: 14px;
          .name {
            font-weight: 600;
          }
          .post {
            color: #666;
            margin-left: 10px;
          }
        }
        .type {
          font-size: 14px;
          font-weight: 600;
        }
      }
      .li_con {
        line-height: 24px;
        font-size: 14px;
        margin-top: 15px;
      }
    }
  }
}
</style>
